<template>
    <div class="screen-header">
        <div class="screen-left">
            <div class="logo">大数据可视化平台</div>
            <div class="search-wrap">
                <input type="text" placeholder="搜索" @input="search">
            </div>
        </div>
        <div class="screen-content">
            <div class="screen-tabs">
                 <div class="tab-item" :class="{active:tabItem.active}" v-for="tabItem in tabs" :key="tabItem.name" @click.stop="_tabs(tabItem)">
                    <span v-text="tabItem.name"></span>
                 </div>
            </div>
            <div class="screen-module">
                <div class="timer">
                    <Icon type="md-time" />
                    <span class="clock" v-text="timer"> </span>
                </div>
               
                <div class="drawer-btns"  v-if="visible" @click.stop="drawer">
                    <Icon type="md-podium" />
                    <span class="name">显示信息</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import delegate from '../js/event.js';
export default {
    data() {
        return {
            tabs: [
                {
                    name:'技术动态',
                    navigator:'technology',
                    active:true,
                },
                {
                    name:'机构动态',
                    navigator:'organization',
                    active:false,
                },
                {
                    name:'专家动态',
                    navigator:'expert',
                    active:false,
                },
            ],
            timer: new Date().Format('yyyy-MM-dd hh:mm:ss'),
            visible:true
        }
    },
    mounted(){
        // 调用时间定时器
        this._timer();

        // 显示抽屉
        delegate.$on('drawer-show',()=>{
            this.visible = true
        })

        // 关闭抽屉
        delegate.$on('drawer-hide',()=>{
             this.visible = false     
        })
    },
    methods: {
        _timer() {
            window.setTimeout(()=>{
                this.timer = new Date().Format('yyyy-MM-dd hh:mm:ss')
                this._timer();
            },1000)
        },
        _tabs(current){
            this.tabs.forEach(item => {
                item.active = false;
            })
            current.active = true;
            this.$router.push(current.navigator);
        },
        search(e){
            delegate.$emit('s-search',e.target.value);
        }
        ,
        drawer(e){
            delegate.$emit('s-drawer',e);
        },

    },

}
</script>
<style lang="scss">
    .screen-header{
        user-select: none;
        display: flex;
        padding-top: 6px;
        height: 60px;
        background: linear-gradient(90deg, #005fff 200px, #073b74);
        .screen-left{
            flex: 0 0 691px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 30px;
             padding-bottom: 5px;
            .logo{
                font-size: 28px;
                color: #fff;
                font-weight: 600;
                margin-right: 34px;
            }
            .search-wrap{
                position: relative;
                width: 280px;
                height: 40px;
                background-color: #f4f5f6;
                border-radius: 5px;
                input{
                    padding: 0 14px;
                    border-radius: 5px;
                    width: 100%;
                    height: 100%;
                    appearance: none;
                    outline: none;
                    border: 0;
                    color: #333;
                    font-weight: 500;
                    font-size: 15px;
                    &::placeholder{
                        font-size: 14px !important;
                        font-weight: 400;
                        color: #999999;
                    }
                }
            }
        }
        .screen-content{
             &::before{
                 position: absolute;
                 content: '';
                 width: 0;
                 height: 0;
                 left: -55px;
                 bottom: 0;
                 border-bottom: 54px solid #0b0626;
                 border-left: 55px solid transparent;
             }
             position: relative;
             flex: 1;
             background-color: #0b0626;
             display: flex; 
             padding-top: 10px;  
        }
        .screen-tabs{
            display: flex;
            min-width: 650px;
            padding-left: 4px;
            .tab-item{
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                flex: 0 0 146px;
                cursor: pointer;
                background: linear-gradient(90deg,#091951,#092551);
                margin-right: 60px;
                &::before{
                    position: absolute;
                    content: '';
                    width: 0;
                    height: 0;
                    left: -45px;
                    bottom: 0;
                    border-bottom: 44px solid #091951;
                    border-left: 45px solid transparent;
                }
                &::after{
                    position: absolute;
                    content: '';
                    width: 0;
                    height: 0;
                    right: -45px;
                    bottom: 0;
                    border-top: 44px solid #092551;
                    border-right: 45px solid transparent;
                }
                &.active{
                    background: linear-gradient(90deg,#043fa8,#0466a8);
                     &::before{
                         border-bottom: 44px solid #043fa8;
                     }
                     &::after{
                         border-top: 44px solid #0466a8;
                     }
                     span{
                         color: #fff;
                     }
                }
                span{
                    color: #98caec;
                    font-size: 18px;
                }
            }
        }
        .screen-module{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 30px;
            .timer{
                font-size: 18px;
                color: #47e1ff;
                font-weight: 500;
                .clock{
                    font-size: 14px;
                    margin-left: 10px;
                }
            }
            .drawer-btns{
                display: flex;
                flex-direction: column;
                font-size: 30px;
                color: #98caec;
                cursor: pointer;
                align-items: center;
                user-select: none;
                .name{
                    font-size: 11px;
                }
            }
        }
    }
</style>
